<template>
  <div>
    <a-row>
      <a-col
        :span="24"
        style="padding-right: 10px"
      >
        <template slot="title">
          <div style="color: rgb(24, 196, 251)">基础设备层</div>
        </template>

        <a-row style="margin: 5% 0 7% 0;">
          <a-col :span="8">
            <div class="icon-container">
              <img src="@assets/overview_air_2.png" style="width: 64px" />
              <div>
                <p>空调</p>
                <span>{{resourceData.airConditionNum || 0}}台</span>
              </div>
            </div>
          </a-col>

          <a-col :span="8">
            <div class="icon-container">
              <img src="@assets/overview_electricity.png" />
              <div>
                <p>配电箱</p>
                <span>{{resourceData.distributionBoxNum || 0}}台</span>
              </div>
            </div>
          </a-col>

          <a-col :span="8">
            <div class="icon-container">
              <img src="@assets/overview_ups.png" />
              <div>
                <p>UPS</p>
                <span>{{resourceData.upsNum || 0}}台</span>
              </div>
            </div>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <Gauge :pue="chartData.pue" />
          </a-col>

          <a-col :span="12">
            <Thermometer
              :temperature="chartData.temperature"
              :humidity="chartData.humidity"
            />
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import Gauge from './chart/Gauge'
  import Thermometer from './chart/Thermometer'

  export default {
    name: 'BaseInfrastructure',
    props: {
      resourceData: {
        type: Object,
        default: () => ({})
      },
      chartData: {
        type: Object,
        default: () => ({})
      }
    },
    components: { Gauge, Thermometer },
  }
</script>

<style
  lang="less"
  scoped
>
  .icon-container {
    text-align: center;

    div {
      margin-top: 10px;

      p {
        font-weight: bolder;
        font-size: 20px;
        margin-bottom: 4px;
      }

      span {
        font-weight: bolder;
        font-size: 22px;
      }
    }
  }
</style>